<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
    <style>
        .box{
            width: 100px;
            height: 40px;
            text-align: center;
            /* background-color: #e1241b; */
            /* color: aliceblue; */
            border: none;
            font-size: 18px;
            border: 4px;
        }
        img{
            width: 200px;
            height: 200px;
        }
        .row{
            width: 50px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: burlywood;
        }
        input{
            width: 100px;
            background-color: pink;
            border: none;
            height: 30px;
            border-radius: 5px;
        }
        a{
            display: block;
            text-decoration: none;
            color: rgb(186, 236, 236);
            font-size: 30px;
        }
        .dom{
            display: flex;
            justify-content: space-between;
        }
        .list{
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <div class="dom"> 
        <input type="button"  value="控制图片" class="box">
        </button>
        <img class="img" alt="图片" src="./bjt2.jpg"  title="可以移动的图片">
        <br>
        <div>   
            <p>第一行</p>
            <p onclick="change()" class="row">操作</p>
            <p >第三行</p>
        </div>
        <div style="height:30px">
            块级标签
            <p>1111</p>
        </div>
    </div><br><br><br>
    <input type="button" onclick="change()" value="点击切换"/>
    <a href="https://www.baidu.com">百度</a>
    <br><br>

    <input type="button" value="显示" class="exchange">
    <div class="list">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
    <script>
        let img = document.querySelector('img');
        let button = document.querySelector('.box');
        let row = document.querySelector('.row');
        button.onclick=function(){
            img.src='bjt1.jpg'
        }
        
        row.onclick = function(){
            row.parentNode.style.backgroundColor = 'red'
            row.parentNode.nextSibling.nextSibling.style.backgroundColor = 'yellow';
            row.parentNode.nextSibling.nextSibling.firstChild.nextSibling.style.backgroundColor = 'blue'
        }

        function change(){
            document.querySelector('a').href="https://bilibili.com";
            document.querySelector('a').textContent = 'bilibili'
        }

        let btn = document.querySelector('.exchange');
        btn.onclick=function(){
            let box = document.querySelector('.list').getElementsByTagName('p');
            for(var i = 0; i<box.length; i++){
                box[0].textContent='我是1'
                box[1].textContent='我是2'
                box[2].textContent='我是3'
                box[3].textContent='我是4'

            }
        }
    </script>
</body>
</html>